<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>选择器的使用</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			body{
				text-align: center;

			}
			
			div {
				/*    */
				background-color: yellow;
			}
			
			#d2{
				/*  id 选择器   */
				background-color: #efefef;
			}
			
			/*  类选择器 */ 
			/* 选中所有class值为text-danger的元素 */
			.text_danger{
				background-color: red;
			}
			/* 选中所有class值为text-succ的元素 */	
			.text_succ{
				background-color: green;
			}
			/* 在class中另外设置一个值 将公共且相同的属性 提取出来  单独设置*/
			.msg{
				color:white;
			}
			
			
		</style>
		
	</head>
	<body>
		
		<div>这里测试div1</div>
		<span>这里测试span</span>
		<h1> 这里测试h1</h1>
		<div id="d2">这里测试div2</div>
		<h2>这里测试h2</h2>
		<h4>这里测试h4</h4>
		
		<hr>
		<!-- ---------------------------------- -->
		<span class="msg text_danger">用户名不能为空</span>
		<span class="msg text_danger">密码不能为空</span>
		
		
		<span class="msg text_succ">用户名可用</span>
		<span class="msg text_succ">密码长度合法</span>
		<span class="msg text_succ">两次密码一致</span>
		
	</body>
</html>